<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<c:set var="appCtx" value="${pageContext.request.contextPath}" />
<c:set var="localeLanguage" value="${pageContext.request.locale.language}" />
<fmt:setBundle basename="messages"/>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><tiles:getAsString name="pageTitle" /></title>
<tiles:insertAttribute name="common-resources" />
<script>
	$(function() {
		
		// Botones de la pagina
		$("#btnSiguiente").button();
		$("#btnCancelar").button();

		$("#btnSiguiente").click(function() {
			$("#waitMessage").css("display","inline");	
			$("#registroInicialForm").submit();
		});

		$("#btnCancelar").click(function() {
			return false;
		});
		
		$("#btnValidarDomicilio").click(function(){
			var url = "${appCtx}/busquedaDireccion";
			iframe = $('<iframe id="validarDomicilioIframe"  src="'+ url +'"  />');
			iframe.dialog({
	          autoOpen: true,
	          title: "<fmt:message key="seeker.title.address" />",
	          width: 700,
	          height: 500,
	          modal: true,
	          resizable: false,
	          buttons: {
	            'Cerrar': function() {
	            	$(this).dialog('close');}
	       	    }
	         }).width(700).height(500);
	        iframe.css("padding",0);    
		});
		
// 		Declara dialogo con el formulario
		$("#areaCodeSearchForm").dialog({
          autoOpen: false,
          title: "<fmt:message key="seeker.title.areaCode" />",
          width: 602,
          height: 500,
          modal: true,
          resizable: false,
          buttons: {
			'Cerrar': function() {
            	$(this).dialog('close');}
       	    }
         });
         
		//Se abre el dialogo con el formulario
		$("#btnBuscarCodigoAreaParticular").click(function() {
			objCodigoDeAreaDestino = $("#areaTelefonoParticular");
			$( "#areaCodeSearchForm" ).dialog( "open" );
		});
		
		$("#btnBuscarCodigoAreaLaboral").click(function() {
			objCodigoDeAreaDestino = $("#areaTelefonoLaboral");
			$( "#areaCodeSearchForm" ).dialog( "open" );
		});
		
		$("#btnBuscarCodigoAreaCelular").click(function() {
			objCodigoDeAreaDestino = $("#areaTelefonoCelular");
			$( "#areaCodeSearchForm" ).dialog( "open" );
		});
		
		$.datepicker.setDefaults($.datepicker.regional["${localeLanguage}"]);
		$.fn.datePickerConexia = function() { 
			$(this).datepicker({
						showOn: "both",
						dateFormat: "dd/mm/yy",
						buttonImage: "${pageContext.request.contextPath}/resources/images/standard/calendar.png",
						buttonImageOnly: true,
						changeYear: true,
						changeMonth: true
					});
		};

		$( "#fechaNacimiento" ).datepicker({
				showOn: "both",
				dateFormat: "dd/mm/yy",
				buttonImage: "${pageContext.request.contextPath}/resources/images/standard/calendar.png",
				buttonImageOnly: true,
				changeYear: true,
				changeMonth: true,
				yearRange: 'c-100:c'});
		$( "#fechaAccidente" ).datePickerConexia();
		
		$("#btnBuscarEmpresa").click(function(){
			var url = "${appCtx}/busquedaEmpresa";
			iframe = $('<iframe id="buscarEmpresaIframe"  src="'+ url +'"  />');
			iframe.dialog({
	          autoOpen: true,
	          title: "<fmt:message key="seeker.title.company" />",
	          width: 600,
	          height: 500,
	          modal: true,
	          resizable: false,
	          buttons: {
	            'Cerrar': function() {
	            	$(this).dialog('close');}
	       	    }
	         }).width(600).height(500);
	        iframe.css("padding",0);    
		});
		
	});
</script>
</head>
<body>
<div id="layoutContainer">
<table id="layout">
	<tr><td colspan="2" id="header"><tiles:insertAttribute name="header" /></td></tr>
	<tr><td id="strut" colspan="2"></td></tr>
	<tr id="middle">
		<td id="navigation-menu"><tiles:insertAttribute name="navigation-menu" /></td>
		<td id="content"> 
		<!-- Contenido --> 
				
				<div class="pageTitle"><fmt:message key="label.initialRegistry" /></div> 
				<!-- Form de Datos --> 
				<form class="form" id="registroInicialForm" accept-charset="UNKNOWN" method="post" 
					enctype="application/x-www-form-urlencoded" action="guardarRegistroAtencionInicial">

					<fieldset>
						<legend>&nbsp;<fmt:message key="label.workerData" />&nbsp;</legend>
						
						<table style="width:750px;" border="0">
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.document" />:</label>
								</td>
								<td colspan="3" style="text-align:left;">
									<label>
										<c:out value="${tipoDocumento}" />&nbsp;
										<c:out value="${numeroDocumento}" />
									</label>
								</td>
							</tr>
							<tr>
								<!-- Apellido y Nombre -->
								<td class="formLabel" style="width: 115px"><label for="apellido"><fmt:message key="label.workerData.lastName" />:</label></td>
								<td style="width: 270px">
									<input id="apellido" name="apellido" value="" 
									style="text-transform:uppercase;" size="40" maxlength="100" type="text" />
								</td>
								<td class="formLabel" style="width: 115px">
									<label for="nombre"><fmt:message key="label.workerData.firstName" />:</label>
								</td>
								<td>
									<input id="nombre" name="nombre" value="" 
									style="text-transform:uppercase;"  size="40" maxlength="100" type="text"/>
								</td>
							</tr>
							<tr>
								<!-- Calle-->
								<td class="formLabel">
									<label for="calle"><fmt:message key="label.workerData.street" />:</label>
								</td>
								<td class="inputTD">
									<input name="calle" id="calle" value="" style="text-transform: uppercase;" 
									size="28" maxlength="100" type="text" />
									
									<label for="numero"><fmt:message key="label.number" />:</label>&nbsp;
									<input name="numero" id="numero" value="" size="6" maxlength="9" type="text"/>
								</td>
								
								<!-- Piso -->
								<td class="formLabel">
									<label for="piso"><fmt:message key="label.floor" />:</label>
								</td>
								<td>
									<input name="piso" value="" size="5" maxlength="3" type="text" />
									&nbsp;
									<!-- Dto -->
									<label><fmt:message key="label.department" />:</label>&nbsp;
									<input name="departamento" value=""
									style="text-transform: uppercase;" size="5" maxlength="5" type="text" />
								</td>
							</tr>
							<tr>
								<td class="formLabel"><label for="codigoPostal"><fmt:message key="label.zipCode" />:</label></td>
								<td colspan="3"><input name="codigoPostal" value="" size="20" maxlength="4" type="text"/></td>
							</tr>
							<!-- Localidad -->
							<tr>
								<td class="formLabel"><label for="localidad"><fmt:message key="label.location" />:</label></td>
								<td>
									<input name="localidad" id="localidad" value=""
									style="text-transform: uppercase;" size="40" maxlength="100" 
									type="text"/>
								</td>
							</tr>
							<!-- Partido -->
							<tr>
								<td class="formLabel">
									<label for="partido"><fmt:message key="label.administrativeArea" />:</label>
								</td>
								<td>
									<input name="partido" id="partido" value="" style="text-transform: uppercase;"
									size="40" maxlength="100" type="text" />
								</td>
							</tr>
							<!-- Provincia -->
							<tr>
								<td class="formLabel"> 
									<label for="privincia"><fmt:message key="label.state" />:</label>
								</td>
								<td colspan="3">
									<input name="provincia" id="provincia" value="" style="text-transform:uppercase;" 
									size="40" maxlength="100" type="text"/> 
									&nbsp;
									<input type="button" id="btnValidarDomicilio" 
									value="<fmt:message key="button.validateAddress" />" />
								</td>
							</tr>
							<tr>
							<!-- Barrio -->
								<td class="formLabel">
									<label for="barrio"><fmt:message key="label.neighborhood" />:</label>
								</td>
								<td colspan="3">
									<input name="barrio" value="" style="text-transform: uppercase;"
									size="17" maxlength="30" type="text"/>
								</td>
							</tr>
							<!-- Telefono 1 -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.personalPhone" />:</label>
								</td>
								<td>
									<input name="areaTelefonoParticular" id="areaTelefonoParticular" value="" size="5"
										maxlength="5" type="text" />
									&nbsp;<input
										name="btnBuscarCodigoAreaParticular" value="<fmt:message key="button.search" />"
										type="button" id="btnBuscarCodigoAreaParticular"/>
									&nbsp;<input name="telefonoParticular" id="telefonoParticular" 
										value="" size="15" maxlength="15" type="text" />
								</td>
							<!-- Telefono 1 observations -->	
								<td class="formLabel" style="">
									<label><fmt:message key="label.observations"/>:</label>
								</td>
								<td>
								<input name="observacionesTelefonoParticular" id="observacionesTelefonoParticular" 
									value="" size="40" maxlength="100" type="text"/>
								</td>
							</tr>
							<!-- Telefono 2 -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.workPhone" />:</label>
								</td>
								<td>
									<input name="areaTelefonoLaboral" id="areaTelefonoLaboral" value="" size="5"
										maxlength="5" type="text" />
									&nbsp;<input
										name="btnBuscarCodigoAreaLaboral" value="<fmt:message key="button.search" />"
										type="button" id="btnBuscarCodigoAreaLaboral"/>
									&nbsp;<input name="telefonoLaboral" id="telefonoLaboral" value="" size="15"
										maxlength="15" type="text" />
								</td>
								<td class="formLabel" style="">
									<label><fmt:message key="label.observations"/>:</label>
								</td>
								<td>
								<!-- Telefono 2 observaciones-->
								<input name="observacionesTelefonoLaboral" id="observacionesTelefonoLaboral" 
									value="" size="40" maxlength="25" type="text"/>
								</td>
							</tr>
							<!-- Telefono 3 -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.cellPhone" />:</label>
								</td>
								<td>
									<input name="areaTelefonoCelular" id="areaTelefonoCelular" value="" size="5"
										maxlength="5" type="text" />
									&nbsp;<input
										name="btnBuscarCodigoAreaCelular" value="<fmt:message key="button.search" />"
										type="button" id="btnBuscarCodigoAreaCelular"/>
									&nbsp;<input name="telefonoCelular" id="telefonoCelular" value="" size="15"
										maxlength="15" type="text" />
								</td>
								<td class="formLabel">
									<label><fmt:message key="label.observations"/>:</label>
								</td>
								<!-- Telefono 3 observaciones-->
								<td>
								<input name="observacionesTelefonoCelular" id="observacionesTelefonoCelular" 
									value="" size="40" maxlength="25" type="text"/>
								</td>
							</tr>
							<!-- Email -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.email"/>:</label>
								</td>
								<td colspan="3">
									<input name="correoElectronico" value="" size="40" maxlength="40"
									type="text" />
								</td>
							</tr>
							<!-- Fecha de nacimiento -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.birthDay"/>:</label>
								</td>
								<td>
									<input name="fechaNacimiento" id="fechaNacimiento" value="" size="10"
									maxlength="10" type="text"/>
									<span class="labelComments">
										&nbsp;<fmt:message key="label.dateFormat"/>
									</span>
								</td>
								<td class="formLabel">
									<label><fmt:message key="label.workerData.gender"/>:</label>
								</td>
								<!-- Sexo -->
								<td>
									<select name="sexo" size="1" class="inputEditStyle">
										<option value="Seleccionar"></option>
										<option value="F">Femenino</option>
										<option value="M">Masculino</option>
									</select>
								</td>
							</tr>
							<!-- estadoCivil -->
							<tr>
								<td class="formLabel"><label><fmt:message key="label.workerData.maritalStatus"/>:</label></td>
								<td><select name="estadoCivil" size="1">
										<option value="Seleccionar"></option>
										<option value="S">Soltero/a</option>
										<option value="C">Casado/a</option>
										<option value="D">Divorciado/a</option>
										<option value="E">Separado/a</option>
										<option value="H">Unión de Hecho</option>
										<option value="V">Viudo/a</option>
								</select></td>
							</tr>
							<tr>
							<!-- Puesto de Trabajo -->
								<td class="formLabel">
									<label><fmt:message key="label.workerData.position"/>:</label>
								</td>
								<td colspan="3">
									<input name="puestoTrabajo" value=""
									style="text-transform: uppercase;" size="40" type="text"/>
								</td>
							</tr>

							<!-- Empresa -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.company.tributeId"/>:</label>
								</td>
								<td colspan="3">
									<input type="text" id="cuit" name="cuit" size="18" maxlength="18" value="" />&nbsp;
									<input name="btnBuscarEmpresa" value="<fmt:message key="button.search" />" 
										id="btnBuscarEmpresa" type="button" />
								</td>
							</tr>

							<!-- Fecha del Accidente -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.accident.date"/>:</label>
								</td>
								<td>
									<input name="fechaAccidente" id="fechaAccidente" value="" size="10"
									maxlength="10" type="text" />
									<span class="labelComments">
										&nbsp;<fmt:message key="label.dateFormat"/>
									</span>
								</td>
								<td class="formLabel">
									<label><fmt:message key="label.accident.time"/>:</label>
								</td>
								<td>
									<input name="horaAccidente" value="" size="5" maxlength="5"
									type="text"/>
									<span class="labelComments">
										&nbsp;<fmt:message key="label.timeFormat"/>
									</span>
								</td>
							</tr>
							<!-- tipoAccidente -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.accident.type"/>:</label>
								</td>
								<td colspan="3">
									<select name="tipoAccidente" size="1">
										<option value="Seleccionar"></option>
										<option value="I">In Itinere</option>
										<option value="T">Accidente Laboral</option>
										<option value="P">Enfermedad Profesional</option>
								</select></td>
							</tr>
							<!-- gravedad -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.accident.severity"/>:</label>
								</td>
								<td colspan="3">	
									<select name="gravedad" size="1">
										<option value="Seleccionar"></option>
										<option value="L">Leve</option>
										<option value="G">Grave</option>
										<option value="M">Mortal</option>
									</select>
								</td>
							</tr>
							<!-- patologia -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.accident.tracerPathology"/>:</label>
								</td>
								<td colspan="3">
									<select name="patologia" id="comboPatologia" size="1" class="inputEditStyle"
									style="width:600px">
										<option value=""></option>
										<option value="01">Quemadura grave (Tipo AB mayor al 20%; Tipo B mayor al 10%)</option>
										<option value="02">Amputación por encima de carpo o tarso, parcial o total</option>
										<option value="03">Amputación de uno a más dedos de manos o pies</option>
										<option value="04">Intoxicaciones agudas con alteración de parámetros vitales</option>
										<option value="05">Coma de origen traumático</option>
										<option value="06">Traumatismo de cráneo con pérdida de conocimiento (se excluyen los casos sin
											alteraciones neurológicas, con TAC normal)</option>
										<option value="07">Politraumatismo grave (cuando se presente más de una opción de este listado)</option>
										<option value="08">Aplastamiento torácico</option>
										<option value="09">Fractura expuesta, incluidas fracturas abiertas (con internación)</option>
										<option value="10">Fractura o luxación de una o más vértebras (con internación)</option>
										<option value="11">Fracturas de pelvis</option>
										<option value="12">Herida abdominal transperitoneal con o sin perforación de víscera</option>
										<option value="13">Perforación o enucleamiento ocular</option>
										<option value="14">Rotura / estallido de vísceras</option>
										<option value="15">Castración o emasculación traumática</option>
										<option value="16">Fracturas cerradas de miembros inferiores o superiores (con internación y/o
											cirugía inmediata al accidente o programada como consecuencia de la lesión inicial)</option>
										<option value="17">Heridas y/o traumatismo de mano con internación</option>
										<option value="18">Lesión producida por arma de fuego o arma blanca (con internación)</option>
										<option value="19">Otras</option>
									</select>
								</td>
							</tr>
							<!-- Descripcion del accidente  -->
							<tr>
								<td class="formLabel">
									<label><fmt:message key="label.accident.description"/>:</label>
								</td>
								<td colspan="3">
									<textarea rows="5" style="width:600px;text-transform: uppercase;min-width:600px; max-width:600px;
									min-height: 150px;max-height: 150px; height: 150px;"
										name="descripcionAccidente"></textarea>
								</td>
							</tr>
						</table>
					</fieldset>
					</form>
					
					<br />					
					<!-- Botones -->
					<div class="formActions" style="text-align: right;">
						<button id="btnSiguiente">
							<fmt:message key="button.next" />
						</button>
						&nbsp;
						<button id="btnCancelar">
							<fmt:message key="button.cancel" />
						</button>
					</div>
					
					<!-- DIV DE MENSAJE DE ESPERA AL CARGAR UNA ACCION -->
					<br />
					<div id="waitMessage" style="display: none">
						<table>
							<tr>
								<td><img src="${appCtx}/resources/images/standard/loader.gif"></img></td>
								<td class="text">Aguarde un momento por favor, su pedido está siendo procesado.</td>
							</tr>
						</table>
					</div>
					<br />
<!-- 					Formulario popin de busqueda de codigos de area -->
					<div id="areaCodeSearchForm">
					<jsp:include page="/jsp/pages/common/busqueda-codigo-area.jsp" />
					</div>
			</td>
			<!-- Fin Contenido -->
	</tr>
	<tr><td colspan="2"><tiles:insertAttribute name="footer" /></td></tr>
</table>
</div>
</body>
</html>